<template>
  <div class="app-container">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="VIP会员" name="vip">
        <div class="filter-container">
          <el-input
            v-model="listQuery.keyword"
            placeholder="会员名/手机号"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-select v-model="listQuery.level" placeholder="会员等级" clearable class="filter-item" style="width: 130px">
            <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
            搜索
          </el-button>
        </div>

        <el-table
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column label="会员ID" prop="id" align="center" width="80" />
          <el-table-column label="会员名" prop="username" align="center" />
          <el-table-column label="会员等级" width="100" align="center">
            <template slot-scope="{row}">
              <el-tag :type="row.level | levelFilter">{{ row.levelName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="积分" prop="points" align="center" />
          <el-table-column label="注册时间" width="180" align="center">
            <template slot-scope="{row}">
              <span>{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="230">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="handleUpdate(row)">
                编辑
              </el-button>
              <el-button size="mini" type="success" @click="handlePoints(row)">
                积分操作
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getList"
        />
      </el-tab-pane>

      <el-tab-pane label="等级设置" name="level">
        <el-table
          :data="levelList"
          border
          style="width: 100%"
        >
          <el-table-column prop="name" label="等级名称" />
          <el-table-column prop="minPoints" label="所需积分" />
          <el-table-column prop="discount" label="折扣率" />
          <el-table-column label="操作" align="center" width="230">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="handleEditLevel(row)">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- VIP编辑弹窗 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <!-- 弹窗表单内容 -->
    </el-dialog>

    <!-- 积分操作弹窗 -->
    <el-dialog title="积分操作" :visible.sync="pointsDialogVisible">
      <!-- 积分操作表单 -->
    </el-dialog>
  </div>
</template>

<script>
import { getVipList, updateVip, updatePoints } from '@/api/user'
// 改为
import { Pagination } from 'element-ui'

export default {
  name: 'VipManagement',
  components: { Pagination },   
  data() {
    return {
      activeTab: 'vip',
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        keyword: undefined,
        level: undefined
      },
      levelOptions: [
        { label: '普通会员', value: 1 },
        { label: '白银会员', value: 2 },
        { label: '黄金会员', value: 3 }
      ]
      // ... 其他数据
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getVipList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    }
    // ... 其他方法
  }
}
</script> 